import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. 使用懒加载导入组件（推荐）

Vue.use(VueRouter) // 2. 必须注册插件

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/views/IndexView.vue'),
      // 二级路由示例（需在IndexView.vue中添加<router-view>）
      children: [
        {
          name: 'IndexCenter',
          path: '',
          component: () => import('@/views/index/IndexCenterView.vue')  // 默认子路由，首頁【展示所有商品分类、banner轮播图、资讯列表】
        },
        {
          name: 'GoodsList',
          path: 'GoodsList/:type?/:categoryId?',
          component: () => import('@/views/index/GoodsListView.vue'), //商品列表
          props(route) {
            return {
              ...route.params,
              ...route.query,
            }
          }
        },
        {
          name: 'GoodsDetail',
          path: 'GoodsDetail/:id',
          component: () => import('@/views/index/GoodsDetailView.vue'), //商品详情
          props: true
        },
        {
          name: 'OrderPreparation',
          path: 'OrderPreparation',
          component: () => import('@/views/index/OrderPreparationView.vue'), //订单准备
        },
        {
          name: 'OrderConfirm',
          path: 'OrderConfirm',
          component: () => import('@/views/index/OrderConfirmView.vue'), //订单准备
        },
        {
          name: 'OrderPay',
          path: 'OrderPay',
          component: () => import('@/views/index/OrderPayView.vue'), //订单准备
          /* props(route) {
            return {
              ...route.query
            }
          } */
        },
        { 
          name: 'PersonalCenter',
          path: 'PersonalCenter', 
          component: () => import('@/views/index/PersonalCenterView.vue'), // 用户中心
          //三级路由 
          children: [
            //资讯相关
            {
              name: 'NewsList',
              path: 'NewsList', 
              component: () => import('@/views/index/personal/news/NewsListView.vue') //资讯列表
            },
            {
              name: 'NewsDetail',
              path: 'NewsDetail/:title/:content',
              component: () => import('@/views/index/personal/news/NewsDetailView.vue'), //资讯详情
              props: true
            },
            //商品相关
            {
              name: 'ProductList',
              path: 'ProductList',
              component: () => import('@/views/index/personal/product/ProductListView.vue') //商品列表
            },
            {
              name: 'CategoryList',
              path: 'CategoryList',
              component: () => import('@/views/index/personal/product/CategoryListView.vue') //商品分类
            },
            //订单相关
            {
              name: 'AllOrderList',
              path: 'AllOrderList',
              component: () => import('@/views/index/personal/order/AllOrderListView.vue') //全部订单
            },
            {
              name: 'SelfOrderList',
              path: 'SelfOrderList',
              component: () => import('@/views/index/personal/order/SelfOrderListView.vue') //用户订单
            },
            //收货地址相关
            {
              name: 'AddressList',
              path: 'AddressList', 
              component: () => import('@/views/index/personal/address/AddressListView.vue') //地址列表
            },
            {
              name: 'FavoriteList',
              path: 'FavoriteList', 
              component: () => import('@/views/index/personal/favorite/FavoriteListView.vue') //收藏列表
            },
            //用户相关
            {
              name: 'UserList0',
              path: 'UserList0', 
              component: () => import('@/views/index/personal/user/UserListView.vue') //用户列表
            },
             {
              name: 'UserList1',
              path: 'UserList1', 
              component: () => import('@/views/index/personal/user/UserListView1.vue') //普通用户
            },
          ]
        }
      ]
    },
    {
      path: '/Authentication',
      component: () => import('@/views/AuthenticationView.vue'),
      children: [
        {
          name: 'Login',
          path: 'Login',
          component: () => import('@/views/account/LoginView.vue')
        }, 
        {
          name: 'Register',
          path: 'Register',
          component: () => import('@/views/account/RegisterView.vue')
        }
      ]
    }
  ]
})

export default router